<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Button Group 按钮组 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    基于<code>Bootstrap Button group</code>，可前往
                    <a class="e-link e-font-bold" href="https://getbootstrap.com/docs/4.3/components/button-group/" target="_blank">查看详细API</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            基础
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">你可以将按钮放到<code>div.btn-group</code>中组成按钮组</span>
                        <div class="e-section-content">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="btn-group" role="group" aria-label="...">
                                        <button type="button" class="btn btn-success">Left</button>
                                        <button type="button" class="btn btn-success">Middle</button>
                                        <button type="button" class="btn btn-success">Right</button>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="btn-group" role="group" aria-label="...">
                                        <button type="button" class="btn btn-info">Left</button>
                                        <button type="button" class="btn btn-info">Middle</button>
                                        <button type="button" class="btn btn-info">Right</button>
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="btn-group" role="group" aria-label="...">
                                        <button type="button" class="btn btn-warning">Left</button>
                                        <button type="button" class="btn btn-warning">Middle</button>
                                        <button type="button" class="btn btn-warning">Right</button>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="btn-group" role="group" aria-label="...">
                                        <button type="button" class="btn btn-danger">Left</button>
                                        <button type="button" class="btn btn-danger">Middle</button>
                                        <button type="button" class="btn btn-danger">Right</button>
                                    </div>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="btn-group" role="group" aria-label="...">
                                        <button type="button" class="btn btn-secondary">Left</button>
                                        <button type="button" class="btn btn-secondary">Middle</button>
                                        <button type="button" class="btn btn-secondary">Right</button>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="btn-group" role="group" aria-label="...">
                                        <button type="button" class="btn btn-brand">Left</button>
                                        <button type="button" class="btn btn-brand">Middle</button>
                                        <button type="button" class="btn btn-brand">Right</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            工具栏
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">你可以将一组按钮放到<code>div.btn-group</code>中组成工具栏</span>
                        <div class="e-section-content">
                            <div class="btn-toolbar" role="toolbar" aria-label="...">
                                <div class="btn-group mr-2" role="group" aria-label="...">
                                    <button type="button" class="btn btn-success"><i class="la la-file-text-o"></i>
                                    </button>
                                    <button type="button" class="btn btn-success"><i class="la la-bold"></i></button>
                                    <button type="button" class="btn btn-success"><i class="la la-paperclip"></i>
                                    </button>
                                </div>
                                <div class="btn-group mr-2" role="group" aria-label="...">
                                    <button type="button" class="btn btn-info"><i class="la la-floppy-o"></i>
                                    </button>
                                    <button type="button" class="btn btn-info"><i class="la la-files-o"></i>
                                    </button>
                                    <button type="button" class="btn btn-info"><i class="la la-header"></i>
                                    </button>
                                </div>
                                <div class="btn-group" role="group" aria-label="...">
                                    <button type="button" class="btn btn-warning"><i class="la la-scissors"></i>
                                    </button>
                                    <button type="button" class="btn btn-warning"><i class="la la-unlink"></i>
                                    </button>
                                    <button type="button" class="btn btn-warning"><i class="la la-italic"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="e-separator e-separator--dashed"></div>
                            <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
                                <div class="btn-group mr-2" role="group" aria-label="First group">
                                    <button type="button" class="btn btn-danger"><i class="la la-file-text-o"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger"><i class="la la-floppy-o"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger"><i class="la la-header"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger"><i class="la la-italic"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="btn-toolbar justify-content-between" role="toolbar"
                                 aria-label="Toolbar with button groups">
                                <div class="btn-group" role="group" aria-label="First group">
                                    <button type="button" class="btn btn-primary"><i class="la la-file-text-o"></i>
                                    </button>
                                    <button type="button" class="btn btn-success"><i class="la la-paperclip"></i>
                                    </button>
                                    <button type="button" class="btn btn-warning"><i class="la la-files-o"></i></button>
                                    <button type="button" class="btn btn-info"><i class="la la-scissors"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-md-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            尺寸
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">
                            你可以使用<code>.btn-group-lg</code> <code>.btn-group-sm</code>设置不同尺寸的按钮组
                        </span>
                        <div class="e-section-content">
                            <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
                                <button type="button" class="btn btn-outline-success">Left</button>
                                <button type="button" class="btn btn-outline-success">Middle</button>
                                <button type="button" class="btn btn-outline-success">Right</button>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="btn-group" role="group" aria-label="Default button group">
                                <button type="button" class="btn btn-outline-warning">Left</button>
                                <button type="button" class="btn btn-outline-warning">Middle</button>
                                <button type="button" class="btn btn-outline-warning">Right</button>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
                                <button type="button" class="btn btn-outline-info">Left</button>
                                <button type="button" class="btn btn-outline-info">Middle</button>
                                <button type="button" class="btn btn-outline-info">Right</button>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            按钮 + 下拉
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <div class="e-section-content">
                            <span class="e-section-info">
                                你可以将按钮与下拉同时放到按钮组中
                            </span>
                            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                <button type="button" class="btn btn-brand"><i class="la la-file-text-o"></i>
                                </button>
                                <button type="button" class="btn btn-brand"><i class="la la-floppy-o"></i></button>
                                <button type="button" class="btn btn-brand"><i class="la la-header"></i></button>
                                <button type="button" class="btn btn-brand"><i class="la la-italic"></i></button>
                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop1" type="button" class="btn btn-brand dropdown-toggle"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Dropdown
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                    <span class="card-head-icon e-hidden">
                        <i class="la la-gear"></i>
                    </span>
                        <h3 class="card-head-title">
                            垂直
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Section-->
                    <div class="e-section">
                        <div class="e-section-content">
                            <span class="e-section-info">
                                你可以将按钮放到<code>div.btn-group-vertical</code>实现垂直方向按钮组
                            </span>
                            <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                                <button type="button" class="btn btn-brand">Button</button>
                                <div class="btn-group" role="group">
                                    <button id="btnGroupVerticalDrop1" type="button"
                                            class="btn btn-brand dropdown-toggle" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                        Dropdown
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-brand">Button</button>
                                <div class="btn-group" role="group">
                                    <button id="btnGroupVerticalDrop2" type="button"
                                            class="btn btn-brand dropdown-toggle" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                        Dropdown
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>